<template>
  <div style="width: 1200px;margin: 0 auto">
    <el-dialog v-model="dialogTableVisible" title="医生详情" width="600">
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生头像:</el-col>
        <el-col :span="12"><img :src="BASE_URL+doctor.imgUrl" alt="医生头像" height="120" width="100"></el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生姓名:</el-col>
        <el-col :span="12">{{doctor.nickname}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生电话:</el-col>
        <el-col :span="12">{{doctor.mobile}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生职务:</el-col>
        <el-col :span="12">{{doctor.duties}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="12" style="font-weight: bold">医生简介:</el-col>
        <el-col :span="12">{{doctor.profiles}}</el-col>
      </el-row>

    </el-dialog>

    <el-row :gutter="30">
      <el-col :span="12" v-for="item in department">
        <el-card class="modeCard">
          <img :src="BASE_URL+item.imgUrl" alt="科室图片" width="300px">
          <p style="font-size: 25px" class="information-title">
            {{ item.name }}</p>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-button class="c2" style="font-weight: bold;color: #FBC115;font-size: 16px;"
                         @click="router.push('/DepartmentDetails?id='+item.id)">查看详情>>
              </el-button>
            </el-col>
            <el-col :span="12">
              <el-button class="c2" style="font-weight: bold;font-size: 16px" @click="selectByDoctorId(item.id)">负责医生>></el-button>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {onMounted, ref} from "vue";
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";

const userToken = localStorage.getItem("user-token") ? JSON.parse(localStorage.getItem("user-token")) : null;
const userId = localStorage.getItem("user-id") ? JSON.parse(localStorage.getItem("user-id")):null;

const doctor = ref({})

const selectByDoctorId=(id)=>{
  dialogTableVisible.value = true
  axios.get(BASE_URL+"/v1/doctors/"+id+"/select").then((response)=>{
    if (response.data.code===20000){
      doctor.value = response.data.data;
    }else ElMessage.error(response.data.message)
  })
}

const dialogTableVisible = ref(false)

const department = ref({})
onMounted(()=>{
  axios.get(BASE_URL+"/v1/department/select/pageNum=1").then((response)=>{
    if (response.data.code===20000){
      department.value = response.data.data.list;
    }
  })
})
</script>

<style scoped>
.c2 {
  border: none;
  margin-top: 16px;
  color: #2EAFD6;
}

.c2:hover {
  background-color: white;
}

.c2:focus {
  background-color: white;
}

.information-title {
  font-family: 仿宋, serif;
  font-weight: bold;
  margin: 0;
  font-size: 18px;
  cursor: pointer; /*鼠标悬停变小手*/
}

.modeCard {
  margin-top: 10px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: all 0.5s;
}

.modeCard:hover {
  transition: 0.5s;
  transform: scale(1.1);
}
</style>